<template>
    <view class="log-detail" :style="{ height: 'calc(100vh - ' + navHeight + 'px)' }">
        <custom_navbar :title="navbar_title" theme="light" />
        <view class="log-detail-con">
            <!-- <image src="https://resources.ym2meta.com/web-smart-tour/ar_bg.png" class="log-detail-img" /> -->
            <map_com v-if="detail.id" :detail="detail"></map_com>
            <view class="log-detail-box">
                <image src="../../static/images/log_detail_bg.png" class="log-detail-bg" />
                <view class="log-detail-msg">
                    <view class="detail-name">{{ detail.name }}</view>
                    <view class="detail-time">
                        <image src="../../static/images/walk.png" class="detail-icon" />
                        <text>{{ detail.create_time }}</text>
                    </view>
                    <view class="detail-info-box">
                        <view class="info-t">
                            <view class="info-item">
                                <view class="item-t"><text class="item-fw">{{ detail.distance }}</text>m</view>
                                <view class="item-b">行走距离</view>
                            </view>
                            <view class="info-item">
                                <view class="item-t"><text class="item-fw">{{ detail.speed }}</text>m/s</view>
                                <view class="item-b">平均速度</view>
                            </view>
                            <view class="info-item">
                                <view class="item-t"><text class="item-fw">{{ detail.duration }}</text></view>
                                <view class="item-b">时长</view>
                            </view>
                            <!-- <view class="info-item">
                                <view class="item-t"><text class="item-fw">8.58</text>km</view>
                                <view class="item-b">配速</view>
                            </view> -->
                        </view>
                        <!-- <view class="info-b">
                            本次步行您消耗了123kcal,平均速度为8.58km/h。请继续加油吧!
                        </view> -->
                    </view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
import { navigateTo, navigateBack } from "@/hooks";
import { walkInfo } from "@/api/home.js";
import custom_navbar from "@/components/custom_navbar/index.vue";
import map_com from "./components/map_com"
import store from "@/store";

export default {
    components: { custom_navbar, map_com },
    data() {
        return {
            navigateTo,
            navHeight: 44,
            navbar_title: "浏览日志详情",
            detail: {}
        }
    },
    onLoad(options) {
        console.log(options);
        this.getDetail(options.id);
    },
    onUnload() {
      store.commit("userInfo/set_is_login_popup", false);
    },
    mounted() {
        this.getNavHeight();
    },
    methods: {
        getNavHeight() {
            let { height, top } = uni.getMenuButtonBoundingClientRect();
            this.navHeight = height + top;
        },
        getDetail(id) {
            let params = { id: id };
            walkInfo(params).then(res => {
                if (res.code == 200) {
                    let datas = { ...res.data };

                    let start = (new Date(res.data.start_time)).getTime();
                    let end = (new Date(res.data.end_time)).getTime();
                    let diff = (start - end) / 1000;
                    let formattedTime = "";

                    if (diff > 0) {
                        // 提取小时、分钟和秒
                        let hours = Math.floor(diff / 3600);
                        let minutes = Math.floor((diff % 3600) / 60);
                        let seconds = diff % 60;

                        // 格式化输出（如果需要）
                        formattedTime = (hours < 10 ? '0' + hours : hours) + ":"
                            + (minutes < 10 ? '0' + minutes : minutes) + ":"
                            + (seconds < 10 ? '0' + seconds : seconds);
                    } else {
                        formattedTime = "00:00:00"
                    }

                    datas.duration = formattedTime;
                    this.detail = datas;
                }
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.log-detail-con {
    width: 100%;
    height: 100%;
    position: relative;

    .log-detail-img {
        width: 100%;
        height: 100%;
    }

    .log-detail-box {
        z-index: 10;
        position: absolute;
        bottom: 58rpx;
        left: 50%;
        transform: translate(-50%, 0%);
        width: 90%;
        // height: 400rpx;
        border-radius: 24rpx;

        .log-detail-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
        }

        .log-detail-msg {
            padding: 28rpx 20rpx 20rpx;

            .detail-name {
                font-weight: 700;
                font-size: 32rpx;
                color: #3D3D3D;
            }

            .detail-time {
                margin-top: 8rpx;
                margin-bottom: 20rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #999999;
            }

            .detail-icon {
                width: 28rpx;
                height: 28rpx;
            }

            .detail-info-box {
                // padding: 32rpx 36rpx;
                color: #fff;
                background: linear-gradient(90deg, #0CCA91 0%, #0FBCD6 100%);
                border-radius: 24rpx;
            }

            .info-t {
                display: flex;
                justify-content: space-around;
                padding: 32rpx 0;

                .info-item {
                    width: 33.3%;
                    text-align: center;
                    font-size: 24rpx;
                    font-weight: 400;
                }

                .item-fw {
                    font-size: 32rpx;
                    font-weight: 700;
                }

                .item-b {
                    margin-top: 4rpx;
                    color: #D0FFBE;
                    opacity: 0.7;
                }
            }

            .info-b {
                padding: 14rpx 36rpx;
                font-weight: 400;
                font-size: 24rpx;
                background-color: rgba(255, 255, 255, .15);
                opacity: 0.7;
            }
        }
    }
}
</style>